<template>
  <div id="gashaponList"> 


        <el-table :data="datalist" style="width: 100%" :height="dtheight" :header-cell-style="{background:'#4F81BC',color:'white'}"
           :row-class-name="tableRowClassName"  :border="true">
                
                 <el-table-column label="兑换时间"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.createtime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="兑奖账号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span style="display: flex;align-items: center;justify-content: center;">{{ scope.row.telphone }}
                          <img src="@/assets/images/a9.png" style="width:18px;height:20px;margin-left:5px;" @click="goinforpersonal(scope.row,scope.row.telphone)"/>
                        </span>
                    </template>
                </el-table-column>
                 <el-table-column label="账号昵称"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.nickname }}</span>
                    </template>
                </el-table-column>
                  <el-table-column label="兑换产品"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.gift_title }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="订单状态"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span v-if="scope.row.status == 0">待发货</span>
                        <span v-if="scope.row.status == 1">已发货</span>
                    </template>
                </el-table-column>
                 <el-table-column label="操作" align='center' width="150" fixed="right">
                    <template slot-scope="scope">                           
                        <el-button  size="mini"  type="primary"  class="button_class1"  plain v-if="scope.row.status == 0"  @click="fh_but(scope.row)">发货</el-button>
                        <el-button  size="mini"  type="primary"  class="button_class2"  plain v-if="scope.row.status == 1"  @click="fh_but(scope.row)">查看</el-button>                            
                    </template>
                </el-table-column>
        </el-table> 




  <!-- 发货 -->
    <el-dialog title="发货" :visible.sync="fh_mtk"  width="600px">
        <div style="width:100%;"> 

            <div class="title_box" style="margin-top:-30px;">
                <div class="dian"></div>
                <div class="title_name">收货信息</div>
            </div>
            <div class="box_top">
                    <div class="box_top_con">
                        <div class="box_top_name" style="display:flex;">
                            <div class="title_span1">收 货 人:</div>
                            <div class="title_span2">
                                <span  v-if="select_row.adss">{{ select_row.adss.username }}</span>
                                <span v-else>-</span>
                            </div>
                        </div>
                        <div class="box_top_name" style="display:flex;">
                            <div class="title_span1">手 机 号:</div>
                            <div class="title_span2">
                                <span  v-if="select_row.adss">{{ select_row.adss.telphone }}</span>
                                <span v-else>-</span>
                            </div>
                        </div>
                        <div class="box_top_name" style="display:flex;">
                            <div class="title_span1">收货地址:</div>
                            <div class="title_span2">
                                <span  v-if="select_row.adss">{{ select_row.adss.region }} {{ select_row.adss.detail }}</span>
                                <span v-else>-</span>
                            </div>
                        </div>
                    </div>
            </div>
            <div class="title_box" style="margin-top:20px;">
                <div class="dian"></div>
                <div class="title_name">商品信息</div>
            </div>
           

           <div class="box_top_con" style="margin-bottom:20px;" v-if="select_row.status == 1">
                    <div class="box_top_name" style="display:flex;">
                        <div class="title_span1">商品名称:</div>
                        <div class="title_span2">{{ select_row.goods_name }}</div>
                    </div>
                    <div class="box_top_name" style="display:flex;">
                        <div class="title_span1">商品规格:</div>
                        <div class="title_span2">{{ select_row.goods_specs }}</div>
                    </div>
                    <div class="box_top_name" style="display:flex;">
                        <div class="title_span1">商品价格:</div>
                        <div class="title_span2">{{ select_row.goods_price }}</div>
                    </div>
                     <div class="box_top_name" style="display:flex;">
                        <div class="title_span1">商品数量:</div>
                        <div class="title_span2">{{ select_row.goods_num }}</div>
                    </div>
            </div>

             <div class="box_top_con" style="margin-bottom:20px;" v-if="select_row.status == 0">
                    <el-form-item label="商品名称">
                            <el-input v-model="mtk_form.goods_name" placeholder="商品名称"  style="width:200px;"></el-input>
                        </el-form-item> 
                        <el-form-item label="商品规格">
                            <el-input v-model="mtk_form.goods_specs" placeholder="商品规格"  style="width:200px;"></el-input>
                        </el-form-item>
                            <el-form-item label="商品价格">
                            <el-input v-model="mtk_form.goods_price" placeholder="商品价格"  style="width:200px;"></el-input>
                        </el-form-item>
                        <el-form-item label="商品数量">
                            <el-input v-model="mtk_form.goods_num" placeholder="商品数量"  style="width:200px;"></el-input>
                        </el-form-item>
            </div>
             <el-form ref="form"   label-width="80px" style="width:100%;">

               <div class="box_top_con" style="margin-bottom:20px;" v-if="select_row.status == 0">
                        <el-form-item label="商品名称">
                            <el-input v-model="mtk_form.goods_name" placeholder="商品名称"  style="width:200px;"></el-input>
                        </el-form-item> 
                        <el-form-item label="商品规格">
                            <el-input v-model="mtk_form.goods_specs" placeholder="商品规格"  style="width:200px;"></el-input>
                        </el-form-item>
                            <el-form-item label="商品价格">
                            <el-input v-model="mtk_form.goods_price" placeholder="商品价格"  style="width:200px;"></el-input>
                        </el-form-item>
                        <el-form-item label="商品数量">
                            <el-input v-model="mtk_form.goods_num" placeholder="商品数量"  style="width:200px;"></el-input>
                        </el-form-item>
                </div>
                <div class="title_box" style="margin-top:20px;">
                    <div class="dian"></div>
                    <div class="title_name">物流信息</div>
                </div>         
                <div class="box_top_con" style="margin-bottom:20px;" v-if="select_row.status == 1">
                        <div class="box_top_name" style="display:flex;">
                            <div class="title_span1">快递公司:</div>
                            <div class="title_span2">{{ select_row.express_compnay }}</div>
                        </div>
                        <div class="box_top_name" style="display:flex;">
                            <div class="title_span1">快递单号:</div>
                            <div class="title_span2">{{ select_row.express_number }}</div>
                        </div>
                </div> 
                <div style="margin-top:20px;" v-if="select_row.status == 0">                           
                        <el-form-item label="快递公司">
                            <el-input v-model="mtk_form.express_compnay" placeholder="快递公司"  style="width:200px;"></el-input>
                        </el-form-item>    
                        <el-form-item label="快递单号">
                            <el-input v-model="mtk_form.express_number" placeholder="快递单号"  style="width:200px;"></el-input>
                        </el-form-item>                                                    
                        <div style="text-align: center;width:50%;margin:auto;margin-top:10px;">
                            <el-button type="primary" class="custom_color_button" style="width:80%;" @click="fh_but_qr">确认</el-button>
                        </div>       
                </div>                 
            </el-form>
           
        </div> 
    </el-dialog>


   </div>
</template>

<script>

export default {
   name: 'gashaponList',
   props:{
      datalist:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        fh_mtk:false,
        mtk_form:{
            express_compnay:'',
            express_number:'',
            goods_name:'',
            goods_specs:'',
            goods_price:'',
            goods_num:'',
        },
        my_id:'',
        shop_data:[{"name":"暂无"}],
        select_row:{},
    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 395

  },
  mounted (){
    
  },
  methods: { 
    fh_but(row){
        this.select_row = row
        this.fh_mtk = true
        this.my_id = row.id
        this.mtk_form.express_compnay = ''
        this.mtk_form.express_number = ''
    },
    fh_but_qr(){
         this.post("/blind_box/deliver", {
                  id:this.my_id,
                  express_compnay:this.mtk_form.express_compnay,
                  express_number:this.mtk_form.express_number,
                  goods_name:this.mtk_form.goods_name,
                  goods_specs:this.mtk_form.goods_specs,
                  goods_price:this.mtk_form.goods_price,
                  goods_num:this.mtk_form.goods_num,
                }).then(res => {
                    if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.fh_mtk = false
                    this.$emit('up_list_fun')
                    }else {
                    this.open1(res.message,'warning')
                }

        })
    },
    goinforpersonal(row,telphone){      
        this.$router.push({
          path: '/index/inforpersonal',
          query: {
            name:telphone,
          }
        })
    }
  }
}
</script>


<style scoped>
 .title_box{
        display: flex;
        align-items: center;
        margin-top: 8px;
    }
    .dian{
        width: 8px;
        height: 8px;
        background: #F1C94A;
        border-radius:50%;
        margin-right: 8px;
    }
    .title_name{
        font-size: 14px;;
        font-weight: 400;
        color: #000000;
    }
    .box_top{
       display: flex;
       margin-top:10px;
    }
    .box_top_con{
        margin-left:10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .box_top_name{
        margin-top:10px;
    }
    .title_span1{
        width: 85px;
        text-align-last: justify;
        color:#5E6C84;
        font-size:16px;
    }
    .title_span2{
        color:#888888;
        padding-left: 10px;
        padding-top:2px;
    }
</style>